<template>
  <div class="about">
    <div class="about-loading" v-if="loading">
      <van-loading type="spinner" color="#ffffff" size="48" />
      <p class="text">{{count}}%</p>
    </div>
    <div v-else>
      <img class="alltitle" src="@/assets/alltitle.png" alt="">
      <img class="alldata" src="@/assets/alldata.png" alt="">
      <!-- <img @click="$router.push('/info')" class="img-tl" src="../assets/down.png" alt=""> -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      loading: false
    }
  },
  created() {
    // this.loadNBSourcePic();
  },
  methods: {
    goToInfo(item) {
      this.$router.push('/info/' + item.zh )
    },
    loadNBSourcePic() {
      var sourcePic = [];
      dataLeft.forEach(item => {
        sourcePic.push(item.zh + '-1-1.png');
        sourcePic.push(item.zh + '-1-2.png');
        sourcePic.push(item.zh + '-2-1.png');
      })
      dataRight.forEach(item => {
        sourcePic.push(item.zh + '-1-1.png');
        sourcePic.push(item.zh + '-1-2.png');
        sourcePic.push(item.zh + '-2-1.png');
      })
      var sLen = sourcePic.length;
      var i;
      var loadSourcPicCount = 0;
      for (i = 0; i < sLen; i++) {
        var url = "https://pollenwechat.weatherbj.com/resource/pollen/h5img/" + sourcePic[i];
        var img = new Image();
        var that = this;
        img.src = url;
        img.onload = function () {
          loadSourcPicCount ++
          that.count =parseInt(loadSourcPicCount * 100 / sLen) 
          if (loadSourcPicCount == sLen) {
            that.loading = false
          }

        }
      }
    }
  }
}
</script>
<style>
.about {
  width: 100%;
  height: 100vh;
  background: url('../assets/bgall.png') no-repeat center;
  background-size: cover;
  position: relative;
  box-sizing: border-box;
  /* padding-top: 30px; */
}
.about-loading {
  position: absolute;
  width: 50px;
  height: 100px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  color: #ffffff;
  text-align:  center;
  font-weight: bold;
  font-size: 18px;
}
.alltitle {
  display: block;
  width: 70%;
  /* height: 40px; */
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
  top: 24px;
}
.alldata {
  width: 100%;
}
</style>